import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import 'amfe-flexible' // 引入根标签，移动端适配
import './VueComponent' // vant组件注册，单独分离成一个js文件，让main.js更简洁

Vue.config.productionTip = false

// 封装中间件函数的插件 --- Vue.directive
const directiveObj = {
  install (Vue) {
    Vue.directive('fofo', {
      inserted (el) {
        // 指令所在van-search组件
        // 组件根标签都是div，input在组件内部
        // console.log(el)
        // 知识点：原生DOM.nodeName 拿到标签名字(注意是大写的字符串)
        if (el.nodeName === 'TEXTAREA' || el.nodeName === 'INPUT') {
          el.focus()
        } else {
          const theInput = el.querySelector('input')
          const theTextarea = el.querySelector('textarea')
          if (theInput) theInput.focus()
          if (theTextarea) theTextarea.focus()
        }
      },
      update (el) {
        if (el.nodeName === 'TEXTAREA' || el.nodeName === 'INPUT') {
          el.focus()
        } else {
          const theInput = el.querySelector('input')
          const theTextarea = el.querySelector('textarea')
          if (theInput) theInput.focus()
          if (theTextarea) theTextarea.focus()
        }
      }
    })
  }
}
// 执行目标对象里的install方法并传入Vue类
Vue.use(directiveObj)

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')
